<template>
	<view class="ker_text">
		<view 
			class="text_row" 
			:style="{'-webkit-line-clamp': (isShow?rowInit:rowNum), 'background':targetSty.textBg, 'padding-bottom': isShow? '28rpx':''}"
		>{{conTxt}}</view>
		<view 
			class="open_close" 
			@tap="changeStatus" 
			:style="{'color':targetSty.color, 'font-size':targetSty.fontSize, 'background':targetSty.btnBg}"
		>
			<text class="" >{{openBtn}}</text>
		</view>
	</view>
</template>

<script>
	
	/**
	 * @description 文本展开与收起
	 * @property {String, Object} conTxt 显示的文本内容
	 * @property {Number} rowNum 默认展示的文本行数
	 * @property {String} openText 展开按钮的文本
	 * @property {String} closeText 关闭按钮的文本
	 * @property {Object} objSty 样式 {
		 * btnBg: 'linear-gradient(transparent, #fff 60%)',   按钮背景色
			color: '#333', 按钮文字颜色
			fontSize: '36rpx',  按钮文字大小
			textBg: '#ddd'  文本内容背景颜色
		 }
	 * @event {Function} changeStatus 展开或者收起事件
	*/
	
	export default {
		name:"ker-text",
		props: {
			conTxt: {
				type:[String, Object],
				default: ``
			},
			rowNum: {
				type: Number,
				default: 3
			},
			openText: {
				type:String,
				default:'展开'
			},
			closeText: {
				type:String,
				default:'收起'
			},
			//样式
			objSty: {
				type:Object,
				default(){
					return{}
				}
			}
		},
		data() {
			return {
				isShow: false,  //是否展开
				rowInit: 0,
				openBtn: this.openText,  //显示展开还是关闭按钮
				targetSty: {
					btnBg: 'linear-gradient(transparent, #fff 60%)',
					color: '#00aaff',
					fontSize: '36rpx',
					textBg: '#ddd'
				}
			};
		},
		watch:{
			objSty: {
				immediate: true,
				handler(e){
					this.targetSty = Object.assign(this.targetSty, this.objSty);
				}
			}
		},
		created() {
			this.targetSty =Object.assign(this.targetSty, this.objSty);
		},
		methods: {
			/* 展开或者收起 */
			changeStatus() {
				this.isShow = !this.isShow;
				if(this.isShow===true){   
					//开
					this.openBtn = this.closeText;
					this.rowInit = 10000
				} else {
					//关
					this.openBtn = this.openText;
					this.rowInit = this.rowNum;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ker_text{
		width: 100%;
		position: relative;
		height: auto;
		transition: all .5s ease-in-out;
		.text_row{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
		.open_close{
			width: 100%;
			position: absolute;
			bottom: -48rpx;
			left: 50%;
			transform: translateX(-50%);
			padding: 40rpx 0 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.hide_close_btn{
			display: none;
		}
	}
</style>
